
<template>
    <div class="base-container">
        <div class="query-form">
            <el-form :inline="true" :model="queryForm" ref="queryFormRef">
                <el-form-item label="审批状态" prop="applyState">
                    <el-select v-model="queryForm.applyState" placeholder="请选择">
                        <el-option :label="item.label" :value="item.value" v-for="(item, index) in queryOptions" :key="'options'+index" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryHandler">查询</el-button>
                    <el-button type="primary" plain @click="resetQueryHandler(queryFormRef)" >重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="base-table">
            <div class="action">
                <el-button type="primary" @click="addHandler">申请休假</el-button>
            </div>
            <el-table
                    :data="tableData"
                    style="width: 100%"
            >
                <el-table-column
                        :prop="item.prop"
                        :label="item.label"
                        :width="item.width"
                        :formatter="item.formatter"
                        v-for="(item, index) in columns"
                        :key="item.prop"/>
                <el-table-column fixed="right" label="操作" width="150">
                    <template #default="scope">
                        <el-button type="default" size="small" @click="infoHandler(scope.row)" >查看</el-button>
                        <el-popconfirm title="确定作废吗?" @confirm="deleteHandler(scope.row)" v-if="[1,2].includes(scope.row.applyState)">
                            <template #reference>
                                <el-button type="danger" size="small" v-auth="'user-delete'">作废</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :total="pager.total"
                        @current-change="pageChangeHandler"
                />
            </div>
        </div>
        <apply-leave-dialog v-model:visible="applyDialogFlag" @success="getTableList"></apply-leave-dialog>
        <el-dialog
                v-model="detailDialogVisible"
                title="申请详情"
                width="60%"
                destroy-on-close
        >
            <el-steps :active="currentItem.applyState > 2 ? 3: currentItem.applyState" align-center>
                <el-step title="待审批" />
                <el-step title="审批中" />
                <el-step title="审批通过/审批拒绝/作废" />
            </el-steps>
            <el-form
                    label-width="120px"
                    label-suffix=":"
            >
                <el-form-item label="休假类型">
                    <div>{{currentItem.applyTypeName}}</div>
                </el-form-item>
                <el-form-item label="休假时间">
                    <div>
                        {{dayjs(currentItem.startTime).format('YYYY-MM-DD HH:mm:ss')}}
                        至
                        {{dayjs(currentItem.endTime).format('YYYY-MM-DD HH:mm:ss')}}
                    </div>
                </el-form-item>
                <el-form-item label="休假时长">
                    <div>{{currentItem.leaveTime}}</div>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup>
    import dayjs from "dayjs";
    const { proxy } = getCurrentInstance()
    import ApplyLeaveDialog from './dialogs/ApplyLeaveDialog.vue'

    defineOptions({
        name: 'LeaveView',
        inheritAttrs: false,
    })

    const applyDialogFlag = ref(false)
    const queryForm = ref({
        applyState: 0
    })
    const queryOptions = ref([
        {value: 0, label: '全部'},
        {value: 1, label: '审批通过'},
        {value: 2, label: '审批拒绝'},
        {value: 3, label: '作废'}
    ])
    const queryHandler = () => {
        getTableList()
    }
    const resetQueryHandler = (formEl) => {
        if (!formEl) return
        formEl.resetFields()
    }

    onMounted(() => {
        getTableList()
    })
    // Table部分
    const tableData = ref([])
    const columns = ref([
        {prop: 'orderNo', label: '单号'},
        {prop: '', label: '休假时间', formatter:(row, column, value)=>{
              return `${dayjs(row.startTime).format('YYYY-MM-DD')}至${dayjs(row.endTime).format('YYYY-MM-DD')}`
            }},
        {prop: 'leaveTime', label: '休假时长'},
        {prop: 'applyType', label: '休假类型', formatter:(row, column, value)=>{
                return {
                    1: '事假',
                    2: '调休',
                    3: '年假'
                }[value]
            }},
        {prop: 'reasons', label: '休假原因'},
        {prop: 'createTime', label: '申请时间', formatter:(row, column, value)=>{
                return dayjs(value).format('YYYY-MM-DD')
        }},
        {prop: 'auditUsers', label: '审批人'},
        {prop: 'curAuditUserName', label: '当前审批人'},
        {prop: 'applyState', label: '审批状态', formatter:(row, column, value)=>{
                return {
                    1: '待审批',
                    2: '审批中',
                    3: '审批拒绝',
                    4: '审批通过',
                    5: '作废'
                }[value]
         }}
    ])
    const pager = ref({
        pageNum: 1,
        pageSize: 10,
        total: 0
    })

    const getTableList = async () => {
        const params = {
            ...queryForm.value,
            ...pager.value
        }
        const result = await proxy.$api.getLeaveList(params)
        pager.value = result.page
        tableData.value = result.list

    }
    // 申请休假
    const addHandler = () => {
        applyDialogFlag.value = true
    }
    const detailDialogVisible = ref(false)
    const currentItem = ref()
    // 查看
    const infoHandler = (item) => {

        currentItem.value = item
        currentItem.value.applyTypeName = {
            1: '事假',
            2: '调休',
            3: '年假'
        }[item.applyType]
        detailDialogVisible.value = true
    }
    // 作废
    const deleteHandler = (item) => {
        proxy.$api.deleteLeave({id: item.id}).then(res => {
            console.log(res)
            item.applyState = 5
            proxy.$message.success(res)

        })
    }
    const pageChangeHandler = () => {

    }
</script>

<style scoped>

</style>
